<!-- 编辑弹窗 -->
<template>
  <ele-modal width="30%" :visible="visible" :close-on-click-modal="true" custom-class="ele-dialog-form"
    :title="isUpdate ? '修改优惠券信息' : '添加优惠券信息'" @update:visible="updateVisible" >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
      <el-row :gutter="24">
        <el-col :md="24" :sm="24">
          <el-form-item label="优惠券编号:"  prop="couponCode">
            <el-input clearable v-model="form.couponCode" placeholder="为空时系统自动生成"  />
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item label="优惠券名称:" prop="couponName">
            <el-input clearable v-model="form.couponName" placeholder="请输入优惠券名称"  />
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item label="优惠券类型:"  prop="couponType" style="width:100%" >
            <el-select v-model="form.couponType" style="width: 100%; " clearable placeholder="请输入优惠券类型" >
              <el-option v-for="(item, index) in couponTypeDatas" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item  label="满减使用:" prop="fullPrice" style="width: 100%;">
            <el-input clearable v-model="form.fullPrice" style="width: 100%;" placeholder="请输入满减使用金额"  @keyup.native="form.fullPrice = form.fullPrice.replace(/[^\d.]/g,'');
                        form.fullPrice = form.fullPrice.replace(/\.{2,}/g,'.');
                        form.fullPrice = form.fullPrice.replace(/^\./g,'');
                        form.fullPrice = form.fullPrice.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                        form.fullPrice = form.fullPrice.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');"/>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item label="优惠券面值:" prop="worth">
            <el-input clearable v-model="form.worth" placeholder="请输入优惠券面值"  style="width: 100%;" @keyup.native="form.worth = form.worth.replace(/[^\d.]/g,'');
                        form.worth = form.worth.replace(/\.{2,}/g,'.');
                        form.worth = form.worth.replace(/^\./g,'');
                        form.worth = form.worth.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                        form.worth = form.worth.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');"/>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item label="有效期:"  prop="validDate"  >
            <el-input v-model="form.validDate" :min="1" :max="100000"  style="width:100%" @keyup.native="form.validDate = form.validDate.replace(/[^\d.]/g,'');
                        form.validDate = form.validDate.replace(/\.{2,}/g,'.');
                        form.validDate = form.validDate.replace(/^\./g,'');
                        form.validDate = form.validDate.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
                        form.validDate = form.validDate.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24" >
          <el-form-item label="新用户赠送:" prop="newCustGiveNum" >
            <el-input-number  v-model="form.newCustGiveNum"  clearable placeholder="请输入新用户赠送张数" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24" >
          <el-form-item label="老用户赠送:" prop="oldCustGiveNum">
            <el-input-number  v-model="form.oldCustGiveNum" clearable placeholder="请输入老用户赠送张数" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item label="描述:" >
            <el-input type="textarea" :rows="4" placeholder="请输入角色描述" v-model="form.remark" clearable />
          </el-form-item>
        </el-col>
      </el-row>
  </el-form>
  <div slot="footer">
    <el-button @click="updateVisible(false)">取消</el-button>
    <el-button type="primary" :loading="loading" v-if="this.btnindex!='3'" @click="save">
      保存
    </el-button>
  </div>
  </ele-modal>
</template>

<script>
  import { AddMCoupon,UpdateCoupon,QueryCouponById } from '@/api/salesmanager/coupon';
  import { QueryAllChildDictViewByCode } from '@/api/systemmanager/dictionarymanager';
  export default {
    name: 'CouponEdit',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      //按钮索引
      btnindex:String,
    },
    data() {
      return {
        // 表单数据
        form: {},
        // 表单验证规则
        rules: {
          couponName: [{required: true,message: '请输入优惠券名称',trigger: 'blur'}],
          couponType: [{required: true,message: '请输入优惠券类型',trigger: 'blur'}],
          worth: [{required: true,message: '请输入优惠券面值',trigger: 'blur'}],
          validDate: [{required: true,message: '请输入优惠券有效期',trigger: 'blur'}],
          oldCustGiveNum: [{required: true,message: '请输入老用户赠送张数',trigger: 'blur'}],
          newCustGiveNum: [{required: true,message: '请输入新用户赠送张数',trigger: 'blur'}],
          fullPrice: [{required: true,message: '请输入满减使用金额',trigger: 'blur'}],
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        //优惠券类型
        couponTypeDatas:[],
      };
    },

    //初始化数据
    mounted(){
      //覆盖基类的上传数量
      this.initData();
    },
    methods: {
      /* 初始化数据 */
      initData(){
          //优惠券类型
          QueryAllChildDictViewByCode(this.Constant.J_YHJ).then((data)=>{
            this.couponTypeDatas = [];
            this.couponTypeDatas = data;
        });
      },

      /* 保存编辑 */
      save() {
        //校验必填信息
        this.$refs['form'].validate((valid) => {
          if (!valid) {return false;}

          this.loading = true;

          const saveOrUpdate = this.isUpdate ? UpdateCoupon : AddMCoupon;
          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);

              //回调父组件方法
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },

      //赋值到页面
      setSkipt(id){
        QueryCouponById(id)
            .then((res) => {
            this.form = res;
        });
      },
    },

    /* 监听visible属性变化 */
    watch: {
     visible(visible) {
        if (visible) {
          if (this.data && this.data.id){
            //初始化form
            this.form = {};
            this.setSkipt(this.data.id);
            this.isUpdate = this.data.id !=null && this.data.id !=undefined;
          } else {
            this.form = {};
            this.isUpdate =false;
          }
        } else {
          //移除校验结果
            this.$refs['form'].clearValidate();
        }
      }
    }
  };
</script>
